<template>
  <div class="charts-box">
    <qiun-vue-ucharts type="arcbar" :opts="opts" :chartData="chartData" />
  </div>
</template>

<script>
  // 需要在您的项目内执行 npm i @qiun/vue-ucharts
  import qiunVueUcharts from '@qiun/vue-ucharts'

  export default {
    components: {
      qiunVueUcharts
    },
    data() {
      return {
        chartData: {},
        //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
        opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: undefined,
          title: {
            name: "80%",
            fontSize: 35,
            color: "#2fc25b"
          },
          subtitle: {
            name: "存储空间",
            fontSize: 25,
            color: "#fff"
          },
          extra: {
            arcbar: {
              type: "default",
              width: 12,
              backgroundColor: "#E9E9E9",
              startAngle: 0.75,
              endAngle: 0.25,
              gap: 2,
              linearType: "custom"
            }
          }
        }
      };
    },
    mounted() {
      this.getSystemInfo();
    },
    methods: {

      getSystemInfo() {
        const that = this;
        this.$axios({
          method: 'get',
          url: `/api/server/system/info`,
        }).then((res) => {
          if (res.data.code === 0) {
            that.getServerData(res.data.data.mem[0].data);
            let num = Math.trunc(res.data.data.mem[0].data * 100)
            that.opts.title.name = num + '%';
          }
        }).catch((error) => {
        });
      },
      getServerData(val) {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              name: "存储空间",
              color: "#2fc25b",
              data: val
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      },
    }
  };
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 100%;
  }
</style>
